<template>
  <section>
    <van-sticky>
      <PageHeader title="课程订单"/>
    </van-sticky>

    <van-tabs v-model="type" sticky @click="onTabChange">
      <van-tab title="课程" name="course">

      </van-tab>
      <van-tab title="订单" name="order">
        <div class="flex flex-col font-common bg-color-white">
          <div class="flex flex-row flex-left flex-centerV">
            <van-field
              v-model="search.sn"
              name="sn"
              label="订单号"
              placeholder="输入订单号"
            />
          </div>

          <div class="flex flex-row flex-left flex-centerV">
            <div class="flex-row flex-left flex-1">
              <van-search
                v-model="search.keywords"
                placeholder="请输入搜索关键词"
                @search="onSearch"
              />
            </div>

            <div class="flex-row flex-left pr10">
              <van-button round size="small" type="primary" @click="onSearch">搜索</van-button>
            </div>
          </div>
        </div>

        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestOrderList">
          <div class="flex flex-col bg-color-white font-common mb10 course-order-item"
               v-for="(item, index) in dataList"
               :key="index"
               @click="$router.push({name: 'CourseOrderDetail', params: {sn: item.order.sn}})">
            <div class="flex flex-row flex-left flex-centerV pd10">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="avatar" />
              <span class="ml5">{{item.user.nick}}</span>
            </div>
            <div class="flex flex-row flex-left font-big strong pd10">课程：{{item.course.name}}</div>
            <div class="flex flex-row flex-left pd10">订单号：{{item.order.sn}}</div>
            <div class="flex flex-row pd10">
              <div class="flex flex-row flex-left flex-1">订单状态：{{item.order.order_status_label}}</div>
              <div class="flex flex-row flex-left flex-1">付款状态：{{item.order.pay_status_label}}</div>
            </div>
            <div class="flex flex-row flex-left pd10">下单时间：{{item.order.dateline|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
            <div class="flex flex-row flex-left pd10" v-if="item.order.pay_time > 0">付款时间：{{item.order.pay_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, List, Search, Sticky, Tab, Tabs, Button, Field} from 'vant';
  import PageHeader from "../../componets/PageHeader";
  import {BASE_STATIC_URL, courseOrderListsUri} from "../../../common/api";
  import util from "../../../assets/js/util";
  Vue.use(Toast).use(Dialog).use(List).use(Search).use(Sticky).use(Tab).use(Tabs).use(Button).use(Field);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        BASE_STATIC_URL: BASE_STATIC_URL,
        type: 'order',
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
        search: {
          keywords: '',
          sn: '',
        }
      }
    },
    methods: {
      onTabChange(name) {
        this.type = name;
        if(name == 'course') {
          this.$router.push({name: 'CourseLists'});
        }
      },
      onSearch() {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestOrderList();
      },
      requestOrderList() {
        const that = this;
        this.loading = true;
        const courseId = util.getQueryVariable('courseId');
        let url = courseOrderListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&sn='+this.search.sn+'&keywords=' + encodeURIComponent(this.search.keywords);
        if(courseId) {
          url += '&course_id=' + courseId;
        }
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
    },
    mounted: function () {
      this.requestOrderList();
    }
  }
</script>

<style scoped>
  .course-order-item .avatar {
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }
</style>
